<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="./0js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象可以访问到 Vue原型上的属性、方法。
		-->

		<div id="root">
			<school></school> <!--模板里面不使用组件， 组件实例虽然创建了， 但是Vue实例$children属性没有聚合-->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		Vue.prototype.x = 99

		//定义school组件
		const school = Vue.extend({
			name:"school",
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:"冯镠霖学校",
					address:"中国"
				}
			},
			methods: {
				showX(){
					console.log(this)
				}
			},
		})

		//创建一个vm
		const vm = new Vue({
			el:"#root",
			data:{
				msg:"你好"
			},
			components:{school}
		})

	</script>
</html>